<template>
	<view style="padding-top: 10px;">
		<view class="bkk bl">
			<view>已选服务内容</view>
			<view class="bc">
				<i class="ri-checkbox-circle-fill" style="color:#008040;font-size:24px;"></i>
				<!-- <i-icon size="24px" color="#008040" name="checkbox-circle-fill"></i-icon> -->
				<view v-html="serviceName||'<font color=#9d9d9d >[服务内容]</font>'"></view>
			</view>
		</view>
		<view class="bkk">
			<view class="b20">
				<view class="bc">
					<i class="ri-user-fill" style="color:#008040;font-size:26px;"></i>
					<!-- <i-icon size="26px" color="#008040" name="user-3-fill"></i-icon> -->
					登记预约信息
				</view>
			</view>
			<view class="">
				<view class="bc b20">
					<view class="r10">姓名</view>
					<input style="font-size: 18px;height: 50px;" type="text" v-model="userName" placeholder="请输入姓名" />
				</view>
				<view class="bc">
					<view class="r10">手机</view>
					<input style="font-size: 18px;height: 50px;" type="text" v-model="phone" placeholder="请输入手机号"
						maxlength="11" />
				</view>
			</view>
		</view>
		<view class="bkk">
			<view class="b20">
				<view class="bc">
					<i class="ri-time-fill" style="color:#008040;font-size:26px;"></i>
					<!-- <i-icon size="26px" color="#008040" name="time-fill"></i-icon> -->
					选择服务时间
				</view>
				<!-- <i-icon size="16px" color="#999" name="arrow-right-s-line"></i-icon> -->
			</view>
			<view class="p-yyxx">
				<radio-group @change="selectTime">
					<view class="b10 bc" v-for="(item,index) in times">
						<radio :value="item" :checked="serviceDate==item" />
						<view>{{item}}</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="bkk">
			<view class="b20">
				<view class="bc">
					<i class="ri-map-pin-3-fill" style="color:#008040;font-size:26px;"></i>
					<!-- <i-icon size="26px" color="#008040" name="map-pin-3-fill"></i-icon> -->
					服务详细地点
				</view>
				<!-- <i-icon size="16px" color="#999" name="arrow-right-s-line"></i-icon> -->
			</view>
			<view class="p-yyxx">
				<view class="">{{serviceSite}}</view>
			</view>
		</view>
		<view style="margin: 10px;">
			<!-- <view class="bc" style="margin-bottom: 10px;font-size: 12px;">
				<i-icon size="20px" color="#008040" name="error-warning-line"></i-icon>您的爱心能量{{loveEnergy}}个，需要30个才可免费预约
			</view> -->
			<button @click="toYuyue()">
				<i class="ri-radio-button-fill" style="color:#fff;font-size:16px;"></i>
				<!-- <i-icon size="16px" color="#FFF" name="radio-button-fill"></i-icon> -->
				<text>确定预约</text>
			</button>
		</view>
		<view style="margin: 10px;font-size: 14px;" class="bc">
			<checkbox @click="agree=!agree" :checked="agree" /><text>阅读并同意《桂民社区服务站服务条款》</text>
		</view>
		<view style="height: 30px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				phone: '',
				serviceId: '',
				serviceName: '',
				serviceDate: '',
				serviceSite: '',
				loveEnergy: 30,
				times: [],
				agree: false,
				price: 0,
				unit:"元",
				type:"免费预约"
			}
		},
		methods: {
			/**
			 * 选择预约时间
			 * @param {Object} evt
			 */
			selectTime(evt) {
				let value = evt.detail.value
				this.serviceDate = value.substr(0, 10).replace(/\D+/g, '-')
				// console.log(this.serviceDate)
			},
			toYuyue: function() {
				let msg = null;
				if (!this.serviceName) {
					msg = "服务内容不能为空"
				} else if (this.loveEnergy < 30) {
					msg = '爱心能量不足'
				} else if (!this.userName) {
					msg = "姓名不能为空"
				} else if (!this.phone) {
					msg = "手机号不能为空"
				} else if (!/\d{11}/.test(this.phone)) {
					msg = "手机号格式错误"
				} else if (!this.serviceSite) {
					msg = "活动地点不能为空"
				} else if (!this.agree) {
					msg = '请阅读并同意《桂民社区服务站服务条款》'
				} else {

				}
				if (!this.serviceDate) {
					if (!this.price) {
						msg = "活动时间不能为空"
					}
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					return
				}
				let _this = this
				this.httpRequest({
					url: '/service/appoint/add',
					method: 'POST',
					data: {
						userName: _this.userName,
						phone: _this.phone,
						serviceId: _this.serviceId,
						serviceName: _this.serviceName,
						serviceDate: _this.serviceDate,
						serviceSite: _this.serviceSite,
						servicePrice: _this.price
					},
					fn(data) {
						let parmas = "?serviceName=" + _this.serviceName +
							"&serviceDate=" + (_this.serviceDate||"[工作日]") +
							"&serviceSite=" + _this.serviceSite +
							"&type=" + _this.type +
							"&price=" + _this.price +
							"&unit=" + _this.unit
						uni.reLaunch({
							url: "fw-yywc"+parmas
						})
					}
				})
			},
			getDateList: function(freeDate, i) {
				let _this = this
				uni.request({
					url: this.baseURL + '/guiminSite/get/date/list?freeDate=' + freeDate,
					method: 'GET',
					success(data) {
						data = data.data
						// console.log(data)
						if (data && data.length > 0) {
							_this.times = data
						} else if (i) {
							_this.getDateList('星期' + i)
						}
					}
				})
			},
			/**
			 * 根据星期数获取日期字符串
			 * @param {Integer} 星期数：weekNo 0-星期日, 1-星期一, 2-星期二, 3-星期三, 4-星期四, 5-星期五, 6-星期六
			 * @param {Integer} size 获取的个数，最多4个
			 * @return {Array}
			 */
			getDateByWeek(weekNo, size) {
				if (!weekNo || !size) {
					return [];
				}
				// console.log(weekNo, size)
				let dateString = []
				let len = 0;
				let date = new Date()
				let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				for (let j = 0; j < 30; j++) {
					let year = date.getFullYear()
					let month = date.getMonth() + 1
					let day = date.getDate()
					let i = date.getDay()
					let week = weekArr[i]

					let monthString = month > 9 ? month : '0' + month
					let dayString = day > 9 ? day : '0' + day
					// console.log("当前时间是：" + year + "-" + monthString + "-" + dayString + " " + week)
					if (weekNo == i) {
						dateString.push(year + "-" + monthString + "-" + dayString + " " + week)
						if ((len += 1) >= size) {
							break;
						}
					}
					date.setDate(day + 1)
				}
				return dateString;
			}
		},
		onLoad(p) {
			// console.log(p)
			//服务id，服务名称，服务地址
			if (p.serviceId && p.serviceName && p.serviceSite) {
				this.serviceId = p.serviceId
				this.serviceName = p.serviceName
				this.serviceSite = p.serviceSite
				let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let b = true
				for (let i in weeks) {
					if (weeks[i] == p.serviceDate) {
						b = false
						this.times = this.getDateByWeek(i, 4)
						break;
					}
				}
				if (b) {
					this.serviceDate = p.serviceDate
					this.times = [p.serviceDate]
				}
			} else {
				uni.showToast({
					title: '页面数据错误',
					icon: 'error',
					duration: 3000
				})
			}
		}
	}
</script>
